<template>
  <div style="width: 100%;" class="box">
    <div style="width: 100%; height: 120px; display: flex; justify-content: space-between; align-items: center;">
      <div style="width: 25%;height: 100%; display: flex;align-items: center;">
        <img style="width: 260px; height: 60%;" src="../../../assets//tu.WEBP" alt="">
      </div>
      <div class="serch" style="width: 50%; height: 100%;">
        <Search :min='352' :max="656" :w="100"></Search>
        <div class="wen">
          <div v-for="(item, index) in arr" :key="index">{{ item }}</div>
        </div>
      </div>
      <div style="width: 25%;display: flex;justify-content: flex-end">
        <CalendarModule />
      </div>
    </div>
    <div style="width: 100%; margin-top: 10px;">
      <SwiperIndex />
    </div>
    <Recommend />

    <div style="width: 100%;height: 100px;margin-top: 20px;">
      <img style="width: 100%; height: 100%;" src="../../../assets//DM_20231212202216_001.WEBP" alt="">
    </div>
    <!-- 数字视频 -->
    <Redbook :numlist="'数字人·口播视频'"></Redbook>
    <div v-for="(item, index) in NavigationData" :key="index">
      <CentralNavigation :TitleData="item" :ImgdataList="store.ImgdataList" v-if="store.ImgdataList.length !== 0" />
    </div>
    <!-- 1分钟制作炫酷视频 -->
    <Redbook :numlist="'1分钟制作炫酷视频'" />
    <Designguru></Designguru>
    <Footer></Footer>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
// 从仓库调取数据
const store = useCounterStore();
store.increment();
// 轮播图组件
import SwiperIndex from '../../../components/Swiper/index.vue';
// 底部组件
import Footer from '@/components/Footer/index.vue';
import Recommend from '../../../components/recommend/index.vue';
// @ts-ignore
import NavigationData from '../../../components/Centralnavigation/data/data.json';
// 设计大咖
import Designguru from '../../../components/Designguru/index.vue';
//邀请函组件
import CentralNavigation from '@/components/Centralnavigation/CentralNavigation.vue';
// 
import Search from '@/components/Search/index.vue';
// 日历组件
import CalendarModule from '@/components/Calendarmodule/CalendarModule.vue';
const arr = ['邀请函',
  'h5',
  '婚礼邀请函',
  '个人简历',
  '学校元旦放假通知',
  '汽车销售',
  '物业月报'];
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.serch {
  max-width: 656px;
  min-width: 352px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 2% 0;
  box-sizing: border-box;
}

.wen {
  font-size: 14px;
  margin-top: 5px;
  color: #666666;
  display: flex;

  div {
    padding: 0 10px;
    cursor: pointer;
    // margin: 0 5px;
  }

  div:hover {
    color: #1593ff;
  }
}
</style>
